@use './mixin.scss' as *;
@use './newStyle.scss' as newStyle;
/**
  * 统一修改
  * 表单
  * 表格
  * 按钮
  * 树
*/
$jvsDarkBlue: #1E6FFF;
$jvsLightBlue: #5b8bff;
$jvsButtonBackColor: #F5F6F7;
$jvsNormalButtonBackColor: #EEEFF0;
$jvsNormalButtonFontColor: #363B4C;
$jvsNormalButtonHoverFocusFontColor: #494f6A;

$jvsSwitchBackColor: #D7D8DB;

$jvsFormItemHeight: 36px;
$jvsFormFontSize: 14px;
$jvsFormBorderRaduis: 4px;

$jvsTableHeaderBackColor: #F5F6F7;
$jvsTableHeaderFontColor: #363B4C;

$jvsNormalFontColor: #6F7588;
$jvsDarkFontColor: #363B4C;
$jvsNormalBorderColor: #EEEFF0;

$jvsDialogHeaderBackColor: #F5F6F7;
$jvsDialogHeaderFontColor: #363B4C;


.el-input{
  .el-input__wrapper{
    padding: 0 15px;
  }
}

// 按钮
.el-button:not(.is-text){
  border: 0;
  border-radius: 4px;
  font-weight: normal;
  @include SourceHanSansCN-Regular;
  background-color: $jvsButtonBackColor;
  color: $jvsNormalButtonFontColor;
  &:hover{
    background: $jvsNormalButtonBackColor;
    color: $jvsNormalButtonHoverFocusFontColor;
  }
  &:focus{
    background: $jvsNormalButtonBackColor;
    color: $jvsNormalButtonHoverFocusFontColor;
  }
}
.el-button.el-button--primary{
  background-color: $jvsDarkBlue;
  color: #fff;
  &:hover{
    background-color: $jvsLightBlue;
    color: #fff;
  }
  &:focus{
    background: $jvsDarkBlue;
    color: #fff;
  }
}
.el-button.is-text{
  color: $jvsDarkBlue;
  padding: 5px 0;
  &:hover{
    color: $jvsLightBlue;
    background: none!important;
  }
}

.el-button.is-text:active{
  color: $jvsDarkBlue;
}

.el-button.is-text:focus{
  color: $jvsDarkBlue;
}
.el-message-box__btns{
  .el-button--primary:focus{
    background-color: $jvsDarkBlue;
    color: #fff;
  }
}

// 数字框
.el-input-number{
  .el-input-number__decrease, .el-input-number__increase{
    background: none;
  }
}


// 开关
.el-switch{
  height: 24px;
  .el-switch__core{
    width: 42px!important;
    height: 24px;
    border-radius: 6px;
    border-color: $jvsSwitchBackColor;
    background-color: $jvsSwitchBackColor;
    box-sizing: border-box;
    .el-switch__action{
      width: 20px;
      height: 20px;
      border-radius: 5px;
      top: 2px;
    }
  }
  &.is-checked{
    .el-switch__core{
      border-color: $jvsDarkBlue;
      background-color: $jvsDarkBlue;
      .el-switch__action{
        left: calc(100% - 21px);
      }
    }
  }
}

// 单选组
.el-radio-group{
  .el-radio{
    height: $jvsFormItemHeight;
    @include SourceHanSansCN-Regular;
    font-weight: 400;
    font-size: $jvsFormFontSize;
    color: $jvsDarkFontColor;
    .el-radio__label{
      font-size: $jvsFormFontSize;
      padding-left: 8px;
    }
    .el-radio__input{
      .el-radio__inner{
        width: 16px;
        height: 16px;
        border: 1px solid #C2C5CF;
        &::after{
          width: 6px;
          height: 6px;
        }
      }
      .el-radio__original{
        height: 16px;
      }
      &.is-checked{
        .el-radio__inner{
          background: $jvsDarkBlue;
          box-shadow: 0px 2px 6px 0px rgba(30,111,255,0.3);
          border: 1px solid $jvsDarkBlue;
        }
        &+.el-radio__label{
          color: $jvsDarkBlue;
        }
      }
    }
  }
}

// 多选组
.el-checkbox-group{
  .el-checkbox{
    height: $jvsFormItemHeight;
    @include SourceHanSansCN-Regular;
    .el-checkbox__label{
      font-size: $jvsFormFontSize;
    }
    .el-checkbox__inner{
      width: 16px;
      height: 16px;
      &::after{
        width: 4px;
        height: 8px;
        left: 5px;
      }
    }
    &.is-checked{
      .el-checkbox__inner{
        background: $jvsDarkBlue;
        border-color: $jvsDarkBlue;
      }
      .el-checkbox__label{
        color: $jvsDarkBlue;
      }
    }
  }
}

.el-form .el-form-item{
  margin-bottom: 22px;
  .el-form-item__label{
    @include SourceHanSansCN-Regular;
    font-size: $jvsFormFontSize;
    color: $jvsDarkFontColor;
  }
  .el-form-item__content{
    line-height: $jvsFormItemHeight;
    input::placeholder, textarea::placeholder{
      @include SourceHanSansCN-Regular;
      font-size: $jvsFormFontSize;
      color: $jvsNormalFontColor;
    }
    .el-input{
      height: $jvsFormItemHeight;
      .el-input-group__append{
        box-shadow: none
      }
    }
    .el-input__inner, .el-textarea__inner{
      @include SourceHanSansCN-Regular;
      font-size: $jvsFormFontSize;
      color: $jvsDarkFontColor;
    }
    .el-textarea__inner{
      min-height: $jvsFormItemHeight!important;
      box-sizing: border-box;
    }
    .el-select{
      height: $jvsFormItemHeight;
      @include SourceHanSansCN-Regular;
      .el-select__wrapper{
        min-height: $jvsFormItemHeight;
        line-height: $jvsFormItemHeight;
        font-size: $jvsFormFontSize;
        padding: 0 15px;
      }
    }
    .slot-item-content{
      height: $jvsFormItemHeight;
      line-height: $jvsFormItemHeight;
    }
    .el-input-number.is-controls-right{
      .el-input-number__decrease, .el-input-number__increase{
        border: 0;
        line-height: calc($jvsFormItemHeight / 2);
      }
    }
    .el-input-number:not(.is-controls-right) {
      .el-input-number__decrease, .el-input-number__increase{
        border: 0;
        line-height: calc($jvsFormItemHeight - 2px);
      }
    }
    .el-date-editor{
      height: $jvsFormItemHeight;
      width: 100%;
    }
    .w-e-toolbar{
      background: #F5F6F7!important;
      border-color: $jvsNormalBorderColor!important;
      border-radius: $jvsFormBorderRaduis $jvsFormBorderRaduis 0 0;
      .w-e-menu{
        i{
          color: $jvsDarkFontColor;
        }
      }
    }
    .w-e-text-container{
      border-color: $jvsNormalBorderColor!important;
      border-radius: 0 0 $jvsFormBorderRaduis $jvsFormBorderRaduis;
    }
    .color-select{
      width: 100%;
      height: $jvsFormItemHeight;
      overflow: hidden;
      background: #F5F6F7;
      border-radius: 4px;
      padding-left: 12px;
      display: flex;
      align-items: center;
    }
  }
  .el-pagination{
    .el-input__inner{
      height: 28px;
      line-height: 28px;
    }
  }
}
.el-form.el-form--label-top .el-form-item{
  .el-form-item__label{
    line-height: 18px;
  }
}
.el-form:not(.el-form--label-top) .el-form-item{
  .el-form-item__label{
    line-height: $jvsFormItemHeight;
    height: $jvsFormItemHeight;
  }
}

.jvs-form{
  .el-form-item{
    .el-form-item__content{
      .jvs-form-item{
        flex: 1;
      }
    }
  }
}

.jvs-table{
  .el-loading-mask{
    background-image: url('/jvs-ui-public/img/loading.gif');
    background-repeat: no-repeat;
    background-position: center;
    .el-loading-spinner{
      .circular{
        display: none;
      }
    }
  }
  // -- start --查询条件按钮，顶部按钮
  .search-form{
    .form-btn-bar{
      .el-button{
        min-width: 60px;
        height: $jvsFormItemHeight;
        font-size: $jvsFormFontSize;
        box-sizing: border-box;
        &.el-button--primary{
          background: #E4EDFF;
          border: 1px solid #1E6FFF;
          color: #1E6FFF;
          .el-icon{
            display: none;
          }
        }
      }
    }
  }
  .table-top{
    .table-top-left{
      .el-button{
        height: $jvsFormItemHeight;
        font-size: $jvsFormFontSize;
      }
    }
  }
  // -- end --查询条件按钮，顶部按钮
  .table-body-box{
    .el-table{
      .el-table__header{
        .el-table__cell{
          background: $jvsTableHeaderBackColor;
          .cell{
            color: $jvsTableHeaderFontColor;
          }
        }
      }
      .el-table__body{
        .el-table__cell{
          border-bottom-color: $jvsNormalBorderColor;
        }
        .el-table__row{
          &:hover{
            .el-table__cell{
              background: none;
            }
          }
        }
      }
    }
  }
}

// 自定义popover
.el-popover.custom-right-tool-poper{
  min-width: 20px;
  padding: 10px!important;
  @include SourceHanSansCN-Regular;
  font-size: 12px;
  width: unset!important;
}
.el-popover.no-padding-border-popover{
  min-width: 0;
  padding: 0!important;
  width: unset!important;
}

// 弹框
.el-overlay-dialog{
  .el-dialog{
    padding: 0;
    .el-dialog__header{
      height: 48px;
      background-color: $jvsDialogHeaderBackColor;
      line-height: 48px;
      padding-left: 24px;
      border-radius: 6px 6px 0 0;
      box-sizing: border-box;
      .el-dialog__title{
        @include SourceHanSansCN-Bold;
        font-size: $jvsFormFontSize;
        color: $jvsFormFontSize;
      }
      &.show-close{
        .el-dialog__headerbtn{
          .el-icon{
            svg{
              path{
                fill: $jvsNormalFontColor;
              }
            }
          }
        }
      }
    }
    .el-dialog__body{
      .dialog-form-box{
        padding-top: 17px;
        .jvs-form{
          .el-col-24:not(.form-item-btn), .el-col-12:not(.form-item-btn){
            .el-form-item.el-form-item--label-top{
              margin: 0 32px 16px 32px;
              .el-form-item__label{
                @include SourceHanSansCN-Bold;
              }
              .el-form-item__content{
                .form-item-slot{
                  width: 100%;
                }
                // -- start --带底色的组件
                .jvs-form-item{
                  .el-input__wrapper, .el-select__wrapper{
                    background: #F5F6F7;
                    box-shadow: none;
                    .el-select__placeholder.is-transparent{
                      color: #6F7588;
                      @include SourceHanSansCN-Regular;
                    }
                  }
                  input::placeholder, textarea::placeholder{
                    color: #6F7588;
                  }
                }
                // -- end --带底色的组件
              }
            }
            .el-form-item.is-error{
              .el-form-item__content{
                .jvs-form-item{
                  .el-input__wrapper, .el-select__wrapper{
                    box-shadow: 0 0 0 1px var(--el-color-danger) inset;
                  }
                }
              }
            }
          }
          .el-col-24.form-item-btn{
            height: 60px;
            box-sizing: border-box;
            border-top: 1px solid $jvsNormalBorderColor;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            .form-btn-bar{
              margin-bottom: 0;
              .el-form-item__content{
                display: flex;
                flex-direction: row-reverse;
                .el-button{
                  margin-right: 16px;
                  min-width: 60px;
                  height: 32px;
                  box-sizing: border-box;
                  font-size: $jvsFormFontSize;
                }
              }
            }
          }
        }
      }
    }
  }
  .drawer-popup-dialog{
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    height: 100%;
    .el-dialog__body{
      height: calc(100% - 48px);
    }
  }
}

.dialog-fade-enter-active .drawer-popup-dialog.el-dialog{
	animation-duration: .3s;
	animation-name: anim-right-popup-show;
	animation-timing-function: cubic-bezier(0.6,0,0.4,1);
}
.dialog-fade-leave-active .drawer-popup-dialog.el-dialog{
	animation-duration: .3s;
	animation-name: anim-right-popup-close;
}
@keyframes anim-right-popup-show {
	0% { right: -100%; }
	100% { right: 0; }
}
@keyframes anim-right-popup-close {
	0% { right: 0;}
	100% { right: -100%; }
}

.scroll-list{
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar{
    width: 4px;
    height: 4px;
  }
  &::-webkit-scrollbar-thumb{
    border-radius: 20px;
  }
  &:hover::-webkit-scrollbar{
    background: #EEEFF0;
  }
  &:hover::-webkit-scrollbar-thumb{
    background: rgba(0, 0, 0, 0.1);
  }
}